<template>
  <div>
    <PageWrapper :contentStyle="{ margin: '10px' }" class="LayoutTable">
      <!-- <abRoundButtonGroup
        v-if="auths(['50201', '50202'])"
        class="mt-4 ml-5"
        v-model="tabValue"
        :btn-list="[
          { label: t('table.report.report_betting_record'), value: 'default', id: '50201' },
          { label: t('table.report.report_betting_sport'), value: 'sport', id: '50201' },
          { label: t('table.report.report_betting_all'), value: 'all', id: '50202' },
        ]"
      />
      <KeepAlive>
        <div>
          <div v-if="tabValue === 'default'">
            <bettingRecord />
          </div>
          <div v-if="tabValue === 'sport'">
            <bettingSport />
          </div>
          <div v-if="tabValue === 'all'">
            <bettingAll />
          </div>
        </div>
      </KeepAlive> -->
      <Tabs v-model:activeKey="tabValue" class="capsule_tap" v-if="auths(['50201', '50202'])">
        <TabPane
          :tab="$t('table.report.report_betting_record')"
          key="default"
          v-if="isHasAuth('50201')"
        >
          <bettingRecord />
        </TabPane>
        <TabPane
          :tab="$t('table.report.report_betting_sport')"
          key="sport"
          v-if="isHasAuth('50201')"
        >
          <bettingSport />
        </TabPane>
        <TabPane :tab="$t('table.report.report_betting_all')" key="all" v-if="isHasAuth('50202')">
          <bettingAll />
        </TabPane>
      </Tabs>
    </PageWrapper>
    <NoData class="mt-10" v-if="!auths(['50201', '50202'])" />
  </div>
</template>

<script setup lang="ts" name="BettingReportNocash">
  import { onMounted, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import bettingRecord from './bettingRecord/index.vue';
  import bettingSport from './bettingSport/index.vue';
  import bettingAll from './bettingAll/index.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import abRoundButtonGroup from '/@/components/abRoundButtonGroup/ab-round-button-group.vue';
  import { auths, isHasAuth } from '/@/utils/authFunction';
  import NoData from '/@/views/sys/noData/index.vue';
  import { Tabs, TabPane } from 'ant-design-vue';

  const { t } = useI18n();
  const tabValue = ref<string>('default');
  onMounted(() => {
    if (isHasAuth('50201')) {
      tabValue.value = 'default';
    } else if (isHasAuth('50202')) {
      tabValue.value = 'all';
    } else {
      tabValue.value = '';
    }
  });
</script>
<style lang="less" scoped>
  ::v-deep(.ant-tabs-top > .ant-tabs-nav) {
    margin: 0 0 10px 10px !important;
  }

  ::v-deep(.vben-basic-table-form-container) {
    padding: 0;
  }
</style>
